<template>
  <a-layout-sider
    :theme="sideTheme"
    :class="[
      'side-menu',
      isMobile ? null : 'shadow',
      isMobile && 'mobile-heigtht',
    ]"
    collapsedWidth="116px"
    width="280px"
    :collapsible="collapsible"
    v-model.trim="collapsed"
    :trigger="null"
  >
    <div :class="['logo', theme]">
      <span>
        <img src="@/assets/img/home/logo.png" />
        <h1>{{ systemName }}</h1>
      </span>
    </div>
    <i-menu
      ref="dom"
      id="menu"
      :theme="theme"
      :collapsed="collapsed"
      :options="menuData"
      :rootSubmenuKeys="rootSubmenuKeys"
      @select="onSelect"
      class="menu"
    />
  </a-layout-sider>
</template>

<script>
import IMenu from "./menu";
import { mapState } from "vuex";
export default {
  name: "SideMenu",
  data() {
    return {
      rootSubmenuKeys: [],
      openKeys: []
    };
  },
  mounted() {
    this.bindClick();
    this.rootSubmenuKeys = this.menuData.map((o) => o.fullPath);
  },
  components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: "dark"
    }
  },
  computed: {
    sideTheme() {
      return this.theme === "light" ? this.theme : "dark";
    },
    ...mapState("setting", ["isMobile", "systemName"])
  },
  methods: {
    bindClick() {
      let menuDom = document.querySelector('#menu')
      let domLi = menuDom?.querySelectorAll('li')
      // 点击其他区域弹出框交互
      this.handlePopClick(menuDom);
      // 左边栏menu菜单点击事件交互
      this.handleMenuClick(domLi);
    },
    handlePopClick(menuDom) {
      let menuTree = this.$refs.dom;
      document.addEventListener("click", (e) => {
        if (menuTree && !menuDom?.contains(e.target)) {
          menuTree.sOpenKeys = [];
        }
      });
    },
    handleMenuClick(domLi) {
      domLi?.forEach((o) => {
        o.addEventListener("click", (e) => {
          this.handleClick(e);
        });
      });
    },
    handleClick(e) {
      let src = e.target.dataset.src;
      let dom = this.$refs.dom;
      this.$set(dom.sOpenKeys, 0, src || "");
    },
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    }
  },
  updated() {
    this.bindClick();
  }
};
</script>

<style lang="less" scoped>
@import "index";
.menu {
  &.ant-menu-inline-collapsed {
    width: 116px;
  }

  ::v-deep .ant-menu-item-selected {
    border-radius: 8px;
    background: #fff;
  }
}

.side-menu::-webkit-scrollbar {
  width: 0px;
}
</style>
